<script setup>
	import { computed } from 'vue'

	const props = defineProps({
		itemData: {
			type: Object,
			default: () => ({}),
		},
	})

	const itemStore = computed(() => {
		return Number(props.itemData.commentScore)
	})
</script>

<template>
	<div class="house-item-v9">
		<div class="item-inner">
			<div class="cover">
				<img
					:src="itemData.image.url"
					alt="" />
			</div>
			<div class="info">
				<div class="summary">{{ itemData.summaryText }}</div>
				<div class="name">{{ itemData.houseName }}</div>
				<div class="price">
					<van-rate
						size="12px"
						:model-value="itemStore"
						readonly
						allow-half
						color="#fff" />
					<div class="new-price">¥{{ itemData.finalPrice }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.house-item-v9 {
		width: 50%; // 瀑布流时关闭
		height: auto;
		box-sizing: border-box; // 瀑布流时关闭
		padding: 3px;
		.item-inner {
			position: relative;
			width: 100%;
			height: auto;

			.cover {
				width: 100%;
				height: auto;
				border-radius: 6px;
				overflow: hidden;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.info {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 10px;
				color: #fff;
				.summary {
					font-size: 12px;
					margin-bottom: 4px;
				}
				.name {
					font-size: 14px;
					margin-bottom: 6px;
				}
				.price {
					display: flex;
					justify-content: space-between;
					.new-price {
						font-size: 16px;
					}
				}
			}
		}
	}
</style>
